<template>
  <div class="z-chart-pic">
    <z-chart height="700px" :chart-option="chartOption" />
  </div>
</template>

<script>
//import ZChart from "@/components/echarts/zchart";

const colors = ["#FC7F7D", "#91D66C", "#00AAFF"];
const legendData = ["直接访问", "邮件营销", "联盟广告"];
export default {
  name: "pie",
  //components: { ZChart },
  data() {
    return {
      chartOption: {
        color: colors,
        backgroundColor: "#0F2553",
        legend: {
          right: 150,
          icon: "circle",
          itemWidth: 10,
          itemHeight: 10,
          top: "middle",
          itemGap: 25,
          textStyle: {
            fontSize: 14,
            rich: {
              a: {
                align: "left",
                color: "#ADE1FF"
              },
              a1: {
                align: "center",
                color: colors[0]
              },
              a2: {
                align: "center",
                color: colors[1]
              },
              a3: {
                align: "center",
                color: colors[2]
              },
              b1: {
                align: "right",
                color: colors[0]
              },
              b2: {
                align: "right",
                color: colors[1]
              },
              b3: {
                align: "right",
                color: colors[2]
              }
            }
          },
          orient: "vertical",
          data: legendData,
          formatter: name => {
            const index = legendData.indexOf(name) + 1;
            return [`{a|${name}}`, `{a${index}|30}`, `{b${index}|30}`];
          }
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["32%", "60%"],
            center: ["20%", "50%"],
            hoverAnimation: false,
            label: {
              show: false,
              position: "center"
            },
            itemStyle: {
              normal: {
                borderColor: "#0F2553",
                borderWidth: 4
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" }
            ],
            z: 1
          },
          {
            silent: true,
            itemStyle: {
              normal: {
                color: "#294857",
                borderColor: "#0F2553",
                borderWidth: 4
              }
            },
            type: "pie",
            hoverAnimation: false,
            radius: ["30%", "33%"],
            center: ["20%", "50%"],
            label: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" }
            ],
            z: 2
          }
        ]
      }
    };
  }
};
</script>

<style scoped>
</style>